<template>
  <div>
    <HeaderNav :title="$t('m.headernav.LOGIN')" :showBack="true" />
    <div class="login_container">
      <div class="login_input_container">
        <img src="../assets/img/user.png" class="login_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG20')" class="login_input" v-model="formData.userName" />
      </div>
      <div class="login_input_container">
        <img src="../assets/img/password.png" class="login_input_img" />
        <input type="password" :placeholder="$t('m.msg.MSG21')" class="login_input" v-model="formData.password" />
      </div>
			
      <div class="login_link_container">
        <router-link to="register" class="login_link">{{$t('m.msg.TO_REIGSTER')}}</router-link>
        <!-- <router-link to="forgetPass" class="login_link">忘记密码</router-link> -->
      </div>
      <div class="login_link_container">
        <!-- <router-link to="login" class="register_link">{{$t('m.msg.TO_LOGIN')}}</router-link> -->
        <router-link to="forgetPass" class="login_link">{{$t('m.headernav.FORGETPASS')}}</router-link>
      </div>
      <div class="login_btn" @click='login'>{{$t('m.headernav.LOGIN')}}</div>
    </div>
  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import base from '@/config/base.js'
import {postQuery, getQuery} from '@/api/query';
import {setUser} from '@/api/session';
export default {
  name: 'login',
  components: {
    HeaderNav
  },
  data() {
    return {
      formData:{
      } 
    }
  },
  methods: {
    login(){
      var that = this;
      if(!that.formData.userName){
        that.$toast.fail(that.$i18n.t('m.msg.MSG26'));
        return
      }
      if(!that.formData.password){
        that.$toast.fail(that.$i18n.t('m.msg.MSG27'));
        return
      }
      var fd = new FormData()
      fd.append('userName', that.formData.userName)
      fd.append('password', that.formData.password)
      postQuery('/member/login', fd)
        .then (res => {
          console.log(res)
          if(res.code == 200){
            //将cookie的key存起来
            setUser(res.data, 1);
          }else{
            that.$toast.fail(res.msg);
          }
      })
    }
  },
  mounted(){}
}
</script>
<style scoped>
  .login_container{
    padding-top: 6vh;
    
  }

  .login_input_container{
    display: flex;
    align-items: center;
    width: 80vw;
    height: 90px;
    border-radius: 50px;
    margin-left: 10vw;
    margin-bottom: 2vh;
    border: 2px #a1a1a1 solid;
    background-color: #FCFCFC;
  }

  .login_input_img{
    height: 40px;
    width: 40px;
    margin: 0px 10px;
  }

  .login_input{
    width: 70%;
    border: none;
    background-color: #FCFCFC;
    zoom: 1.2;
  }

  .login_link_container{
    font-size: 32px;
    /* display: flex; */
    /* width: 40vw; */
    margin-left: 10vw;
    margin-top:20px;
    /* justify-content: space-between; */

  }

  .login_link{
    color: #01D2FF;
  }

  .login_btn{
    height: 80px;
    width: 80vw;
    margin: 5vh 10vw;
    background-color: #01D2FF;
    color: white;
    font-size: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
